<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>投诉</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
		<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
		<style type="text/css">
		html,
			body,
			#app,
			.step {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			/*			#first_step {
				display: none;
			}
			
			#two_step {
				/*display: none;*/
		}
		</style>
	</head>

	<body>
		<div id="app">
			<div id="first_step" class="step" v-show="step == 1">
				<div class="weui-cells__title">请选择投诉原因</div>
				<div class="weui-cells weui-cells_radio">
					<label class="weui-cell weui-check__label" for="x11">
		        <div class="weui-cell__bd">
		          <p>虚假活动、活动不真实</p>
		        </div>
		        <div class="weui-cell__ft">
		          <input type="radio" class="weui-check" name="radio1" id="x11">
		          <span class="weui-icon-checked"></span>
		        </div>
      		</label>
					<label class="weui-cell weui-check__label" for="x12">
		        <div class="weui-cell__bd">
		          <p>诱导分享、诱导关注</p>
		        </div>
		        <div class="weui-cell__ft">
		          <input type="radio" name="radio1" class="weui-check" id="x12" >
		          <span class="weui-icon-checked"></span>
		        </div>
		    </label>
					<label class="weui-cell weui-check__label" for="x12">
		        <div class="weui-cell__bd">
		          <p>欺诈、违法</p>
		        </div>
		        <div class="weui-cell__ft">
		          <input type="radio" name="radio1" class="weui-check" id="x12" >
		          <span class="weui-icon-checked"></span>
		        </div>
		    </label>
					<label class="weui-cell weui-check__label" for="x12">
		        <div class="weui-cell__bd">
		          <p>色情、暴力</p>
		        </div>
		        <div class="weui-cell__ft">
		          <input type="radio" name="radio1" class="weui-check" id="x12" >
		          <span class="weui-icon-checked"></span>
		        </div>
		    </label>
					<label class="weui-cell weui-check__label" for="x12">
		        <div class="weui-cell__bd">
		          <p>其他</p>
		        </div>
		        <div class="weui-cell__ft">
		          <input type="radio" name="radio1" class="weui-check" id="x12" >
		          <span class="weui-icon-checked"></span>
		        </div>
		    </label>
					<a href="javascript:void(0);" class="weui-cell weui-cell_link">
						<div class="weui-cell__bd">遇到网页流量被劫持了怎么办？</div>
					</a>
				</div>
				<div class="weui-cells__title">
					<a href="javascript:;" class="weui-btn weui-btn_primary" @click.stop="step = 2;">下一步</a>
				</div>
			</div>

			<div id="two_step" class="step" v-show="step == 2">
				<div class="weui-cells__title">投诉描述</div>
				<div class="weui-cells weui-cells_form">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<textarea class="weui-textarea" placeholder="请输入详细描述" rows="3" v-model="desc"></textarea>
							<div class="weui-textarea-counter"><span>{{count}}</span>/200</div>
						</div>
					</div>
				</div>
				<div class="weui-cells__title">联系方式</div>
				<div class="weui-cells">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<input class="weui-input" type="text" placeholder="请填写您的联系方式，以便联系">
						</div>
					</div>
				</div>
				<div class="weui-cells__title">
					<a href="javascript:;" class="weui-btn weui-btn_primary">提交</a>
					<a href="javascript:;" class="weui-btn weui-btn_default" @click="step = 1">上一步</a>
				</div>
			</div>

		</div>
		<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: function() {
					return {
						step: 1,
						desc: ''
					}
				},
				watch: {
					'desc': function (newVal, oldVal) {
						if (newVal > 200) {
							return $.toast("字符超过200", "forbidden");
						}
					}
				},
				computed: {
					count: function () {
						return this.desc.length;
					}
				},
				methods: {

				}
			});
//			document.addEventListener('touchmove', function(e) {
//				e.preventDefault();
//			}, false);
		</script>
	</body>

</html>